How I turned from a TailwindCSS skeptic to an aficionado⚡️

I work a full-time job, most days are a 9 to 5 but some even go beyond, plus, I’ve a two year old at home, so that makes it even harder to take the time out to build cool little side projects.

I generally love writing CSS, adding micro-interactions on my buttons and other components, and I’ve built many apps using plain old CSS or a preprocessor like SASS and as much as I want to continue doing that, it keeps getting harder and harder managing my time with all the things I’ve listed above.

I like using some CSS-in-JS component libraries but generally to get the customization I desire, I end up writing a bunch of CSS anyway. But lately, I’ve been using Tailwind and it really helped me build apps way faster with the same styling and interactions.

I was a Tailwind Skeptic once

I first heard of Tailwind back in 2019 when it was in beta and for the longest time, I’ve been a skeptic. I always used to think it’s overrated and is an unnecessary abstraction over CSS. Now, I am not afraid to admit, I was wrong.

I first tried it in mid-2021 found it interesting, but nothing too special. But in late 2021, I participated in the CIVO Hackathon with some friends, although the Hackathon was a 2 days long, I couldn’t really start building the front-end till there were only a few hours left due to commitments at work, that’s when I decided to give Tailwind another shot and I’m glad I did. I was able to build (an okay-ish) front-end for H2S in a few hours and we even ended up winning in the Best IoT Hack category 🎉. You can read more about our app, H2S and the other winners here. As you may have guessed, I’ve been an avid Tailwind user ever since, and I mainly use it for my side-projects, hackathons etc.

How Tailwind helps me, and could probably help you too

Tailwind makes you fast ⚡️

If you have a good understanding of the basics, Tailwind will enable you to style your code at a rapid pace. Instead of creating custom CSS for each element or customizing a CSS-in-JS component, you can directly apply utility classes in your HTML / JSX. This significantly reduces the time spent switching between HTML and CSS files.

Here’s a simple example with speech bubbles (You can experiment with the below code using this playground link.)

TailwindCSS

html

 <div className={`relative m-8 max-w-80 rounded-lg bg-blue-400
	p-4 text-white`}>
  This speech bubble was created using TailwindCSS
	<div className="absolute z-10">
    <div className={`rounded-sm	before:absolute before:-bottom-2.5
			before:-left-5 before:h-4 before:w-4 before:-rotate-45
			before:transform before:border-l-2 before:border-t-2
			before:border-blue-400 before:bg-blue-400`}></div>
  </div>
</div>

Vanilla CSS

css

 .custom-relative {
  position: relative;
  margin: 2rem;
  max-width: 20rem;
  border-radius: 0.375rem;
  background-color: #60a5fa;
  padding: 1rem;
  color: #fff;
}

.custom-absolute {
  position: absolute;
  z-index: 10;
}

.custom-before {
  position: absolute;
  bottom: -0.5rem;
  left: -1.3rem;
  width: 0.75rem;
  height: 0.75rem;
  background-color: #60a5fa;
  border-top: 0.125rem solid #60a5fa;
  border-left: 0.125rem solid #60a5fa;
  transform: rotate(-45deg);
}

html

 <div class="custom-relative">
  This speech bubble was created using vanilla CSS
  <div class="custom-absolute">
    <div class="custom-before"></div>
  </div>
</div>

This is a simple speech bubble, now imagine you have a button or a dropdown that has some cool :hover and :active states the amount of code you have to write when using vanilla CSS would be a lot more, also, you would need to have basic CSS knowledge for both CSS and Tailwind, but Tailwind is just faster and more concise to write.

Tailwind is pretty intuitive

Tailwind follows a consistent naming convention for its utility classes. Once you understand the naming scheme, it becomes incredibly easy to remember and apply styles. For example, bg-blue-500 sets the background color to a shade of blue, and text-white sets the text color to white.

Building a simple button (You can experiment with the below code using this playground link)

html

 <button class="bg-blue-500 text-white
	font-bold px-4 py-2 rounded">
  Click me
</button>

In the above example, we have a button with a blue background, white text, bold font, padding, and rounded corners. The class names clearly describe the purpose of each style, making it intuitive to anyone familiar with basic CSS.

Easy customization

Tailwind CSS allows you to customize every aspect of your design again, without having to write too much customization logic. You can define your own color palette, spacing, font sizes, and more in the configuration file tailwind.config.js. This ensures consistency throughout your project and enables you to maintain a cohesive visual identity.

So kids…

That’s the story of how I met your mo… uh, wrong storyline 🤦🏻‍♂️. That is the story of how I turned from a Tailwind skeptic to someone who enjoys using it regularly.

Happy coding! 🚀